import { Button, ConfigProvider, Pagination } from 'antd';
import { SearchOutlined, PlusSquareOutlined } from '@ant-design/icons';
import zhCN from 'antd/es/locale/zh_CN';
import { useState } from 'react';
import './Stafflnfo.css'
function StaffInfo() {
    const onChange = (page, pageSize) => {
        console.log('Page: ', page, pageSize);
    };
    return (
        <div className="StaffInfo">
            <div className="header">
                <input type="text" placeholder='请输入用户ID' />
                <Button className='btn' icon={<SearchOutlined />}>查询</Button>
                <Button className='btn1' icon={<PlusSquareOutlined />}>新增员工</Button>
            </div>
            <div className="subject">
                <ul>
                    <li>员工ID</li>
                    <li>员工姓名</li>
                    <li>员工性别</li>
                    <li>员工地址</li>
                    <li>员工职务</li>
                    <li>员工电话</li>
                    <li>员工描述</li>
                    <li>员工所属部门</li>
                    <li>操作</li>
                </ul>
                <ul>
                    <li>101</li>
                    <li>张三</li>
                    <li>男</li>
                    <li>江西南昌</li>
                    <li>员工</li>
                    <li>18036459559</li>
                    <li>web前端开发</li>
                    <li>软件开发</li>
                    <li><button>删除</button></li>
                </ul>
            </div>
            <div className="footer">
                <ConfigProvider locale={zhCN}>
                    <Pagination
                        total={85}
                        showSizeChanger
                        showQuickJumper
                        onChange={onChange}
                        showTotal={(total) => `共${total}条`}
                    />
                </ConfigProvider>
            </div>
        </div>
    )
}

export default StaffInfo